<template>
  <div>
    <table class="table table-bordered mb-1 mt-3" :class="isViewMode ? 'report-finish' : ''">
      <tbody>
        <tr>
          <td class="font-weight-bold" data-font-bold="true" colspan="10">反担保措施</td>
        </tr>
        <tr>
          <td class="report-input-td" :class="isViewMode ? 'td-text-left' : ''" colspan="10">
            <div class="p-2">
              <span v-if="isViewMode">{{ counter_guarantee || '-' }}</span>
              <el-input
                v-else
                v-model="counter_guarantee"
                rows="5"
                placeholder="输入反担保措施"
                @blur="SaveData"
                type="textarea"
              ></el-input>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    queryId: {
      type: String,
      default: '',
    },
    related: {
      type: Object,
      default: () => {},
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
    tableName: {
      type: String,
      default: 'customer_related',
    },
  },
  data() {
    return {
      counter_guarantee: '',
    }
  },
  computed: {
    isViewMode() {
      return this.viewMode
    },
  },
  watch: {
    related: {
      handler: function () {
        this.counter_guarantee = this.related.counter_guarantee
      },
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    SaveData() {
      if (this.counter_guarantee === this.related.counter_guarantee) {
        return
      }
      const data = {
        counter_guarantee: this.counter_guarantee,
      }
      this.$api
        .updateData(this.$serviceName, this.tableName, this.queryId, data)
        .then(() => {
          this.$emit('save', true)
        })
        .catch(err => {
          this.$message.err(`保存反担保措施失败${err}`)
        })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/gov/components/creditFile/style.scss';
</style>
